@extends('admin.layout')
@section('content')
    <div class="layui-card">
        <div class="layui-card-header">
            <form action="/admin/article/index.html" class="layui-form" method="get">
                <div class="layui-form-item">
                    <div class="layui-input-inline">
                        <input type="text" name="title" value="" autocomplete="off" placeholder="请输入标题" class="layui-input"/>
                    </div>
                    <div class="layui-input-inline">
                        <select name="cid">
                            <option value="">全部分类</option>
                            <option value="1" > 前端开发</option>
                            <option value="2" > 后端开发</option>
                            <option value="3" > 移动互联</option>
                            <option value="4" > 人工智能</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="is_top">
                            <option value="">是否置顶</option>
                            <option value="1" >是</option>
                            <option value="0" >否</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="is_hot">
                            <option value="">是否推荐</option>
                            <option value="1" >是</option>
                            <option value="0" >否</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="status">
                            <option value="">是否发布</option>
                            <option value="1" >是</option>
                            <option value="0" >否</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 50px;">
                        <button class="layui-btn layui-btn-primary ajax-search"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-card-body">
            <div class="layui-btn-group">
                <a href="/admin/article/add.html" class="layui-btn"><i class="fa fa-plus-circle"></i> 添加数据</a>
                <a href="/admin/article/del.html" class="layui-btn layui-btn-danger ajax-batch"><i class="fa fa-trash-o"></i> 批量删除</a>
                <a href="/admin/article/edit/name/is_top/value/1.html" class="layui-btn layui-btn-primary ajax-batch"><i class="fa fa-star"></i> 设置置顶</a>
                <a href="/admin/article/edit/name/is_top/value/0.html" class="layui-btn layui-btn-primary ajax-batch"><i class="fa fa-times-circle"></i> 取消置顶</a>
                <a href="/admin/article/edit/name/is_hot/value/1.html" class="layui-btn layui-btn-primary ajax-batch"><i class="fa fa-thumbs-up"></i> 设置推荐</a>
                <a href="/admin/article/edit/name/is_hot/value/0.html" class="layui-btn layui-btn-primary ajax-batch"><i class="fa fa-times-circle"></i> 取消推荐</a>
                <a href="/admin/article/edit/name/status/value/1.html" class="layui-btn layui-btn-primary ajax-batch"><i class="fa fa-send"></i> 设置发布</a>
                <a href="/admin/article/edit/name/status/value/0.html" class="layui-btn layui-btn-primary ajax-batch"><i class="fa fa-times-circle"></i> 取消发布</a>
            </div>
            <table class="layui-hide" id="test"></table>

            <script type="text/html" id="switchTpl">
                <!-- 这里的 checked 的状态只是演示 -->
                <input type="checkbox" name="sex" value="@{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" @{{ d.id == 10003 ? 'checked' : '' }}>
            </script>

            <script type="text/html" id="checkboxTpl">
                <!-- 这里的 checked 的状态只是演示 -->
                <input type="checkbox" name="lock" value="@{{d.id}}" title="锁定" lay-filter="lockDemo" @{{ d.id == 10006 ? 'checked' : '' }}>
            </script>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                </div>
            </script>


        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.use('table', function(){
            var table = layui.table
                ,form = layui.form;

            table.render({
                elem: '#test'
                ,url:'/demo/table/user/'
                ,toolbar: '#toolbarDemo'
                ,cellMinWidth: 80
                ,cols: [[
                    {type:'numbers'}
                    ,{type: 'checkbox'}
                    ,{field:'id', title:'ID', width:100, unresize: true, sort: true}
                    ,{field:'username', title:'用户名', templet: '#usernameTpl'}
                    ,{field:'city', title:'城市'}
                    ,{field:'wealth', title: '财富', minWidth:120, sort: true}
                    ,{field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true}
                    ,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
                ]]
                ,page: true
            });

            //监听性别操作
            form.on('switch(sexDemo)', function(obj){
                layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            });

            //监听锁定操作
            form.on('checkbox(lockDemo)', function(obj){
                layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            });

            //工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选')
                        break;
                };
            });
        });
    </script>
@endsection